import React, { useEffect } from 'react'
import { useState } from 'react'
import axios from 'axios'
interface DataList {
  title: string
  word: string
  price: number
  id: string
  img: string
}
const List: React.FC = () => {
  const [list, setList] = useState<DataList[]>([])
  useEffect(() => {
    axios.get('/api/list').then((res) => {
      const resp = res.data.data
      setList(resp)
    })
  }, [])
  return (
    <div>
      {list.map((v, i) => {
        return (
          <dl key={v.id}>
            <dt>
              <img src={v.img} alt=""></img>
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.word}</p>
              <p>{v.price}</p>
            </dd>
          </dl>
        )
      })}
    </div>
  )
}
export default List
